
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 动态组件</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
	<button @click='toShow'>点击显示子组件</button>
	<component v-bind:is="which_to_show"></component>
</div>
 
<script>
 
// 创建根实例
new Vue({
  el: '#app',
  data:{
	  which_to_show:'first'
  },
	methods:{
		toShow:function(){
			var arr = ["first","second","third"];
			var index = arr.indexOf(this.which_to_show);
			if(index<2){
				this.which_to_show = arr[index+1];
			}else{
				this.which_to_show = arr[0];
			}
		}
	},
	components:{
		first:{
			template:'<div>这是子组件1<div>'
		},
		second:{
			template:'<div>这是子组件2<div>'
		},
		third:{
			template:'<div>这是子组件3<div>'
		},
	}
})
</script>
</body>
